<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-07 14:14:53
 * @LastEditors: your name
 * @LastEditTime: 2021-11-19 16:57:50
 * @Description: file content
-->
<route>
{
  "meta":{
    "title": "角色管理",
    "showMenu" :true,
    "serialNum": 20,
    "localism": "sys.role_management"
  }
}
</route>
<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.name"
          :placeholder="$t('sys.role_name')"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="queryData.status"
          :placeholder="$t('sys.status')"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="item in ROLE_STATUS_ENUM"
            :key="item.key"
            :value="item.key"
            :label="$t('sys.' + item.i18nLable)"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData">{{$t('sys.query')}}</el-button>
        <el-button @click="handleReset">{{$t('sys.reset')}}</el-button>
      </el-col>
      <el-col class="mt10">
        <el-button type="primary" v-permission:system_role__add @click="handleCreate">{{$t('sys.new')}}</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="name" :label="$t('sys.role_name')" width="250" />
      <el-table-column prop="icon" :label="$t('sys.status')" width="180">
        <template slot-scope="scope">
          {{ scope.row.status | roleStatus }}
        </template>
      </el-table-column>
      <el-table-column prop="comment" :label="$t('sys.remarks')" />
      <el-table-column prop="actions" :label="$t('sys.operation')" width="250">
        <template slot-scope="scope">
          <span
            class="table-actionItem"
            v-permission:system_role__edit
          ><el-button
            type="text"
            @click="handleEdit(scope.row)"
          >{{$t('sys.edit')}}</el-button
          ></span
          >
          <span
            class="table-actionItem"
            v-permission:system_role__edit
          ><el-button
            type="text"
            @click="handleAuthSetting(scope.row)"
          >{{$t('sys.permission_set')}}</el-button
          ></span
          >
          <span
            class="table-actionItem"
            v-permission:system_role__edit
          >
            <el-popconfirm
              :title="
                scope.row.status === 1
                  ? $t('sys.confirm_to_disable_role')
                  : $t('sys.confirm_to_enable_role')
              "
              placement="top"
              @confirm="handleStatus(scope.row)"
            >
              <el-button type="text" slot="reference">
                {{ scope.row.status === 1 ? $t("sys.disable") : $t("sys.enable") }}
              </el-button>
            </el-popconfirm>
          </span>
          <span
            class="table-actionItem"
            v-permission:system_role__delete
          >
            <el-popconfirm
              :title="$t('sys.confirm_to_delete_role')"
              placement="top"
              @confirm="handleDelete(scope.row)"
            >
              <el-button
                class="link-danger"
                type="text"
                slot="reference"
              >{{$t('sys.delete')}}</el-button
              >
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>

    <RoleForm ref="RoleForm" @ok="loadData" />
  </div>
</template>

<script>
import RoleForm from './__components__/RoleForm'
import { ROLE_STATUS_ENUM } from '@/utils/enum'
import { getHmrolePageList,deleteHmrole,putHmroleStatus } from '@/apis/paas/HmRoleController.js'

const defaultQueryData = {
  status: ROLE_STATUS_ENUM[0].key
}

export default {
  name: 'RoleSetting',

  components: {
    RoleForm
  },

  data () {
    return {
      loading: false,
      ROLE_STATUS_ENUM,
      queryData: {
        ...defaultQueryData
      },
      pageData: {
        pageSize: 10,
        pageNo: 1
      },
      tableData: [],
      total: 0
    }
  },

  created () {
    this.loadData()
    // this.$store.dispatch('loadBlackButtons', 'system_role')
  },

  methods: {
    loadData () {
      getHmrolePageList({
        ...this.queryData,
        ...this.pageData
      }).then((res) => {
        this.tableData = res.data
        this.total = res.totalCount
      })
    },

    handleReset () {
      this.queryData = {
        ...defaultQueryData
      }
      this.loadData()
    },

    handleCreate () {
      this.$refs.RoleForm.addForm()
    },

    handleStatus (record) {
      const { status, id } = record
      putHmroleStatus({
        id,
        status: status === 1 ? 2 : 1
      }).then((res) => {
        this.loadData()
        this.$message.success(this.$t('sys.operation_success'))
      })
    },

    handleEdit (record) {
      this.$refs.RoleForm.editForm(record)
    },

    handleAuthSetting (record) {
      this.$router.push({
        path: '/organizationPermission/roleSetting/role',
        query: {
          id: record.id
        }
      })
    },

    handleDelete (record) {
      deleteHmrole([record.id]).then((res) => {
        this.loadData()
        this.$message.success(this.$t('sys.operation_success'))
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
